<template>
  <v-touch :class="{content:true,finish:item.isFinish}"
          :style="contentStyle"
          @tap="bgTouch()">
    <!--        角色-->
    <div class="brush-container">
      <div class="big-brush" v-show="item.assignmentName == article.name"
           v-for="(article,index) in item.articles" :key="index+100"
           :style="bigBrushStyle(article)">
      </div>
    </div>
    <v-touch :class="articleClassName(article)"
            v-for="(article,index) in item.articles" :key="index"
            :style="articleStyle(article,index)"
            @tap="articleTouch(article,$event)"
    >
<!--      <Point v-if="!operated" class="pointTouch"/>-->
    </v-touch>
  </v-touch>
</template>

<script>
  import { mixins } from "@/common/mixins/assignmentMixins.js"
  import {mapActions} from "vuex";
  // import Point from "../point.vue"
  // eslint-disable-next-line no-unused-vars
  const $ = window.$
  export default {
    mixins: [mixins],
    // components:{
    //   Point
    // },
    computed: {
      bigBrushStyle(article){
        return function (article) {
          return {
            filter: this.isFinished? 'none' : 'grayscale(1)',
            background: 'url(' + article.imageUrl + ')center center/contain no-repeat'
          }
        }
      },
      articleClassName(){
        return  function(article){
          const classNames = ['article']
          if(article.name == this.item.assignmentName){
            if(this.hintShowing) classNames.push('suc')
            if(article.active) classNames.push('active')
          }
          return classNames
        }
      },
    },
    data(){
      return{
        hintShowing: false,
        touchCount: 0,
        isFinished: false,
        operated: false
      }
    },
    beforeMount() {
      if(this.item.isFinish){
        this.isFinished = true
        return
      }
      if(!this.item.isFinished && this.index === this.activeIndex) {
        this.operated = false
        this.onEnter()
      }
    },
    methods: {
      onEnter:function(){
        clearTimeout(this.showHintImageTimeOut)
        this.showHintImageTimeOut = setTimeout(()=>{
          this.hintShowing = true
          setTimeout(()=>{this.hintShowing = false},3000)
        },6000)
      },
      bgTouch: function () {
        if(this.item.isFinish){
          return
        }
        this.operated = true
        this.retryMusic()
        this.touchCount++
        if(this.touchCount > 3 ){
          this.hintShowing = true
          setTimeout(() => { this.hintShowing = false }, 3000)
        }
      },
      articleTouch: function (article,event) {
        if(this.item.isFinish){
          return
        }
        this.operated = true
        this.updateOperated({questionIndex:this.questionIndex,param:this.index})
        if(this.item.assignmentName == article.name){
          this.$set(article,'active',true)
          this.hintShowing = true
          this.isFinished = true
          setTimeout(() => {
            this.hintShowing = false
            this.$set(article,'active',false)
          }, 3000)
          this.sucMusic()
          setTimeout(()=>{this.updateAssignmentFinish({questionIndex:this.questionIndex,param:this.index})},3000)
          this.setFireworkPlay(event)
          this.addAnswer({
            id: this.item.id,
            type: true
          })
        }else {
          this.losMusic()
          if(this.isSeedEntery){
            setTimeout(()=>{this.$emit('nextAssignment')},600)
          } else {
            this.$emit("losShow")
          }
          this.$set(article, "isLos", true)
          setTimeout(() => { this.$set(article, "isLos", false) }, 1000)
          this.addAnswer({
            id: this.item.id,
            type: false
          })
        }
      },
      ...mapActions("mainStatus", ["setLoading"])
    },
    watch: {
      activeIndex: function (activeIndex) {
        if (this.index === activeIndex && !this.item.isFinish) {
          this.onEnter()
        } else {
          this.hintShowing = false
        }
      }
    }
  }
</script>

<style scoped lang='stylus'>
  @import '../../../common/stylus/content.styl'
  .brush-container
    position absolute
    $center('WHLT', 9rem, 5rem)
    top 20%
    border-radius 0.8rem
    background-color rgba(255, 255, 255, 0.8)
    padding 0.5rem
    box-sizing border-box
    z-index 9999
    .big-brush
      position absolute
      $center('WHLT',4rem,4rem)
  .active
    filter drop-shadow(5px 5px 2rem rgb(254, 172, 81))
    animation big 2s
</style>
